<template>
  <el-container class="examine_box">
    <!-- 页面首部，包含抽屉 -->
    <el-header id="examine_header">
      <el-icon color="#fff" size="42px"><Eleme /></el-icon>
      <span>{{ webTitle }}</span>
      <div class="mask_item"></div>
      <el-avatar
        id="avatar"
        :size="42"
        :src="circleUrl"
        @click="drawer = true"
        @error="defaultSrc"
      ></el-avatar>
      <el-drawer
        v-model="drawer"
        title=""
        direction="rtl"
        size="16%"
        :with-header="false"
      >
        <el-avatar id="drawer_avatar" :size="64" :src="circleUrl"></el-avatar>
        <el-button type="danger" @click="leaveThis">退 出 登 录</el-button>
      </el-drawer>
    </el-header>
    <!-- 页面主体部分，包含导航栏以及审核区 -->
    <el-container id="examine_main_container">
      <!-- 主控制台--导航栏 -->
      <el-aside id="main_aside">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="defaultActive"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon size="22px"><Histogram /></el-icon>
              <span>论 坛 审 核</span>
            </template>
            <el-menu-item index="1-1" @click="approvedData(0)">
              <el-icon size="22px"><List /></el-icon>
              <span>未 审 核</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="approvedData(1)">
              <el-icon size="22px"><Checked /></el-icon>
              <span>已 通 过</span>
            </el-menu-item>
            <el-menu-item index="1-3" @click="approvedData(-1)">
              <el-icon size="22px"><Failed /></el-icon>
              <span>已 删 除</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon size="22px"><Ticket /></el-icon>
              <span>博 客 审 核</span>
            </template>
            <el-menu-item index="2-1" @click="approvedDataBlog(0)">
              <el-icon size="22px"><List /></el-icon>
              <span>未 审 核</span>
            </el-menu-item>
            <el-menu-item index="2-2" @click="approvedDataBlog(1)">
              <el-icon size="22px"><Checked /></el-icon>
              <span>已 通 过</span>
            </el-menu-item>
            <el-menu-item index="2-3" @click="approvedDataBlog(-1)">
              <el-icon size="22px"><Failed /></el-icon>
              <span>已 删 除</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon size="22px"><VideoCameraFilled /></el-icon>
              <span>视 频 审 核</span>
            </template>
            <el-menu-item index="3-1" @click="jumpIntoVedio(0)">
              <el-icon size="22px"><List /></el-icon>
              <span>未 审 核</span>
            </el-menu-item>
            <el-menu-item index="3-2" @click="jumpIntoVedio(1)">
              <el-icon size="22px"><Checked /></el-icon>
              <span>已 通 过</span>
            </el-menu-item>
            <el-menu-item index="3-3" @click="jumpIntoVedio(-1)">
              <el-icon size="22px"><Failed /></el-icon>
              <span>已 删 除</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon size="22px"><Avatar /></el-icon>
              <span>用 户 审 核</span>
            </template>
            <el-menu-item index="5-1" @click="jumpIntoUser(0)">
              <el-icon size="22px"><List /></el-icon>
              <span>未 审 核</span>
            </el-menu-item>
            <el-menu-item index="5-2" @click="jumpIntoUser(1)">
              <el-icon size="22px"><Checked /></el-icon>
              <span>已 通 过</span>
            </el-menu-item>
            <el-menu-item index="5-3" @click="jumpIntoUser(-1)">
              <el-icon size="22px"><Failed /></el-icon>
              <span>已 删 除</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="6" @click="getUserFeedBack">
            <el-icon size="22px"><Service /></el-icon>
            <span>用 户 反 馈</span>
          </el-menu-item>

          <el-menu-item index="4" @click="getTopic">
            <el-icon size="22px"><Notebook /></el-icon>
            <span>话 题 栏</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 审核区 -->
      <el-container id="main_container">
        <!-- 通过不同的ifTopic来判断显示内容 -->
        <!-- 转移至论坛 -->
        <el-main v-if="ifTopic === 0" class="processed">
          <post-element
            v-for="(el, idx) of baseData"
            :key="idx"
            :isApproved="isApproved"
            :postId="el._id"
            :postMan="el.username"
            :postMsg="el.info"
            :postTitle="el.info"
            :postLocation="el.college"
            :postTag="el.tag"
            :postImg="el.info_img"
            :isNoApproved="isNoApproved"
            :isTopic="ifTopic"
            @flash-father="flashFunc(index)"
          >
          </post-element>
        </el-main>
        <!-- 通过不同的ifTopic来判断显示内容 -->
        <!-- 转移至博客文章 -->
        <el-main v-if="ifTopic === 1" class="processed">
          <post-element
            v-for="(el, idx) of baseData"
            :key="idx"
            :isApproved="isApproved"
            :postId="el._id"
            :postMan="el.username"
            :postMsg="el.title"
            :postTitle="el.title"
            :postLocation="el.location"
            :postTag="el.type"
            :postImg="el.cover"
            :isNoApproved="isNoApproved"
            :isTopic="ifTopic"
            @flash-father="flashFuncBlog(index)"
          >
          </post-element>
        </el-main>

        <!-- 上方是审核帖子的样式,我需要给他加个判断让他在特定情况下显示 -->

        <!-- 通过不同的ifTopic来判断显示内容 -->
        <!-- 转移至视频 -->
        <el-main v-if="ifTopic === 3" class="processed">
          <Vedio :chooseVedio="chooseVedio" />
        </el-main>
        <!-- 转移至话题修改 -->
        <el-main v-if="ifTopic === 4" class="processed">
          <Topic />
        </el-main>
        <!-- 转移至用户审核 -->
        <el-main v-if="ifTopic === 5" class="processed">
          <UserJudge :chooseUser="chooseUser" />
        </el-main>
        <!-- 转移至用户反馈 -->
        <el-main v-if="ifTopic === 6" class="processed">
          <post-element
            v-for="(el, idx) of baseData"
            :key="idx"
            :isApproved="isApproved"
            :postId="el._id"
            :postMan="el.username"
            :postMsg="el.feedback"
            :postTitle="el.feedback"
            :postLocation="el.location"
            :postTag="el.type"
            :postImg="el.imgs"
            :isNoApproved="isNoApproved"
            :isTopic="ifTopic"
            :postbtn="true"
            @flash-father="flashFuncFeedBack()"
          >
          </post-element>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {
  List,
  Checked,
  Menu,
  Eleme,
  Failed,
  Notebook,
  VideoCameraFilled,
  Ticket,
  Histogram,
  Avatar,
  Service,
} from "@element-plus/icons-vue";

import postElement from "../components/posts.vue";
import Topic from "../components/topic.vue";

import Vedio from "../components/video.vue";
import UserJudge from "../components/userJudge.vue";
import axios from "axios";

export default {
  name: "Home",
  components: {
    List,
    Checked,
    Menu,
    Eleme,
    Failed,
    Notebook,
    VideoCameraFilled,
    Ticket,
    Histogram,
    Service,
    Avatar,
    UserJudge,

    postElement,
    Topic,
    Vedio,
  },
  data() {
    return {
      webTitle: "校园社区后台管理系统",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // drawer 抽屉是否弹出的状态布尔值
      drawer: false,
      // baseData 审核列表的数据存储位置
      baseData: [],
      // isNoApproved 审核状态，即该帖子未审核 0 ， 已审核 1， 已删除 -1， 其余数字不代表审核状态
      isNoApproved: 0,
      // index 变量用于渲染时取与选择区域匹配的数据
      index: 0,
      // ifTopic --- 根据其判断显示内容
      ifTopic: 0,
      // defaultActive 导航栏激活的索引，在返回审核页时可更改实现返回审核区时所处状态不变的非功能需求
      defaultActive: "1-1",
      // 由于是多个小内容块 Vedio视频块设置一个参数传入来判断选择的板块,下方chooseUser也是同样效果,对应的是User板块
      chooseVedio: 0,
      chooseUser: 0,
    };
  },
  // 在进入页面时，若是从详情页跳转回来时，则获取详情页的状态值，重新渲染导航状态
  // 如详情页是博客审核的已审核状态，则返回审核页时导航栏恰好位于该位置
  created() {
    this.defaultActive = this.$route.query.defaultIndex
      ? this.$route.query.defaultIndex
      : this.defaultActive
      ? this.defaultActive
      : "1-1";
    let first = this.defaultActive[0];
    let second = this.defaultActive[2] - 1;
    second = second == 2 ? -1 : second;

    // 根据所得的状态值渲染审核区域的数据
    if (first == 1) {
      this.approvedData(second);
    } else if (first == 2) {
      this.approvedDataBlog(second);
    } else {
      this.getUserFeedBack();
    }
  },
  methods: {
    // 加载失效时的默认情况
    defaultSrc(event) {
      const img = event.srcElement;
      img.src = url(
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      );
      img.onerror = null;
    },
    // 点击抽屉退出登录选项
    leaveThis() {
      this.$router.push("/");
    },
    // 加载论坛帖子的数据，idx 变量为当前需要加载数据的审核状态
    approvedData(idx) {
      this.ifTopic = 0;
      this.index = idx;
      axios({
        method: "post",
        url: "getNeedJudgePostsInfo",
      }).then((res) => {
        if (idx === 0) {
          this.isNoApproved = 0;
        } else if (idx === 1) {
          this.isNoApproved = 1;
        } else {
          this.isNoApproved = -1;
        }
        // 获取状态为idx的帖子数据
        this.baseData = res.data.filter((item) => {
          return item.status === idx;
        });
      });
    },
    // 加载博客的数据，idx 变量为当前需要加载数据的审核状态
    approvedDataBlog(idx) {
      this.ifTopic = 1;
      this.index = idx;
      axios({
        method: "post",
        url: "getNeedJudgeBlogInfo",
      }).then((res) => {
        if (idx === 0) {
          this.isNoApproved = 0;
        } else if (idx === 1) {
          this.isNoApproved = 1;
        } else {
          this.isNoApproved = -1;
        }
        // 所加载数据中item.cover只是字符串与post中的所要求的数据不一致
        // 复用post组件，因此修改cover
        // 要求返回的博客类型是文章
        this.baseData = res.data.filter((item) => {
          item.cover = [item.cover];
          return item.status === idx && item.type === "article";
        });
      });
    },
    // 此处是标题信息
    // begin
    getTopic() {
      // 修改ifTopic的属性来判断跳转的内容
      this.ifTopic = 4;
    },
    // 视频信息
    jumpIntoVedio(x) {
      // 修改ifTopic的属性来判断跳转的内容 同时修改choose属性的值
      this.chooseVedio = x;
      this.ifTopic = 3;
    },
    jumpIntoUser(x) {
      // 修改ifTopic的属性来判断跳转的内容 同时修改choose属性的值
      this.chooseUser = x;
      this.ifTopic = 5;
    },
    // end
    // 返回用户反馈内容
    getUserFeedBack() {
      this.ifTopic = 6;
      this.index = 1;
      axios({
        method: "post",
        url: "getUserFeedback",
      }).then((res) => {
        this.isNoApproved = 2
        this.baseData = res.data.data
      });
    },
    // flash 开头的函数皆为从post子组件中接受信号后执行
    // 论坛帖子点击按钮之后重新刷新页面数据
    flashFunc(index) {
      this.approvedData(index);
    },
    // 博客点击按钮之后重新刷新页面数据
    flashFuncBlog(index) {
      this.approvedDataBlog(index);
    },
    // 用户反馈信息点击按钮之后重新刷新页面数据
    flashFuncFeedBack() {},
  },
};
</script>

<style lang="less" scoped>
@background_color: #545c64;
@active_text_color: #ffd04b;
@text_color: #fff;
@border_bottom_color: 1px solid #646c74;
@basic_font_size: 16px;
@border_radius: 3px;

.size {
  height: 100%;
  width: 100%;
}
.flex_box(@layout: row) {
  display: flex;
  flex-flow: @layout nowrap;
  justify-content: flex-start;
  align-items: center;
}
.font_size(@n: 1) {
  font-size: @basic_font_size * @n;
}
.border_box {
  border-radius: @border_radius;
  box-sizing: border-box;
  padding: 20px 15px;
}

.examine_box,
/deep/ .el-aside,
/deep/ .el-container,
/deep/ .el-menu {
  .size();
}
.examine_box {
  overflow: hidden;
}

#examine_header {
  background-color: @background_color;
  border-bottom: @border_bottom_color;
  .flex_box(row);
  .font_size(1.6);
  color: @text_color;

  & > .el-icon {
    margin-right: 15px;
  }

  & > div {
    flex: 1 1 0%;
  }

  /deep/ .el-avatar {
    cursor: pointer;
  }
}

/deep/ .el-aside {
  width: 14%;
  border-right: none;
  .el-menu {
    .el-menu-item,
    .el-sub-menu__title {
      // border-bottom: @border_bottom_color;
      .font_size(1.1);

      .el-icon {
        width: 42px;
        height: 42px;
      }
    }
  }

  // 定义滚动条的宽高以及背景，宽高分别对应横竖滚动条的尺寸
  &::-webkit-scrollbar {
    width: 6px;
    height: 16px;
    background-color: #848484;
  }
  // 定义滚动条的轨道，内阴影以及圆角
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #848484;
  }
  // 滑块内阴影以及圆角
  &::-webkit-scrollbar-thumb {
    height: 20px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }
}

/deep/ .el-drawer__body {
  .flex_box(column);
  box-sizing: border-box;
  padding-top: 150px;

  width: 100%;

  .el-avatar {
    margin-bottom: 230px;
  }
  .el-button {
    width: 100%;
  }
}

#main_container {
  .size();
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;

  /deep/ .el-main {
    background-color: rgba(84, 92, 100, 0.6);
    .border_box();

    overflow: hidden scroll;

    &::-webkit-scrollbar {
      width: 6px;
      height: 16px;
      background-color: #848484;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgb(100 98 90 / 50%);
      border-radius: 10px;
      background-color: #646c74;
    }
    &::-webkit-scrollbar-thumb {
      height: 20px;
      border-radius: 6px;
      -webkit-box-shadow: inset 6px 5px 10px rgb(0 0 0 / 30%);
      background-color: #ddd;
    }
  }

  /deep/ .el-footer {
    height: 0;
  }
}
</style>
